<template>
  <view v-if="shenheStatus == 0" class="order">
    <view class="item" v-for="item in orderList" :key="item.id">
      <orderItem :order="item" ref="order"></orderItem>
    </view>
    <view class="noMore" v-if="noMore">{{ $t('home.noMore') }}~</view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import orderItem from './components/order-item.vue';
export default {
  components: {
    orderItem,
    Shenhe,
  },
  data() {
    return {
      // 订单列表
      orderList: [],
      // 当前加载页面
      page: 1,
      // 是否加载完毕
      noMore: false,
    };
  },
  methods: {
    // 获取订单列表
    async getOrders() {
      const res = await this.$allrequest.merchant.orderList(
        {
          page: this.page,
        },
        true
      );
      if (res.code == 0) {
        this.orderList = [...this.orderList, ...res.data.list];
        if (this.orderList.length >= res.data.row_count) {
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }
    },
  },
  onShow() {
    this.orderList = [];
    this.page = 1;
    this.noMore = false;
    this.getOrders();
  },
  onReachBottom() {
    if (!this.noMore) {
      this.page++;
      this.getOrders();
    }
  },
};
</script>

<style lang="scss" scoped>
.order {
  min-height: 100vh;
  background-color: #f2f2f2;
  padding-bottom: 20rpx;
  .item {
    margin-bottom: 24rpx;
  }
  .noMore {
    width: 100%;
    height: 120rpx;
    font-size: 22rpx;
    color: #c1c1c1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
